<script setup lang="ts">
import { userinfo } from '@/stores/counter';
import delComments from '@/api/delComments';
import sendLike from '@/api/sendLike';
import { ref } from 'vue';
const user = userinfo();
const props = defineProps([
  'name',
  'text',
  'time',
  'avatar',
  'like',
  'toId',
  'commentId',
  'newsId',
  'isStared',
  'fatherName',
  'fatherCommentId',
]);
const { deleting } = delComments();
const confirm = ref(false);
const { sending } = sendLike();
const likeNum = ref(props.like);
const isStared = ref(props.isStared);
const add = ref(false);
const send = async () => {
  const status = await sending(
    Number(user.baseInfo.id),
    2,
    props.commentId,
    isStared.value ? 2 : 1
  );
  if (status?.success) {
    likeNum.value = status.likeNum;
    isStared.value = !isStared.value;
  }
};
function addComment() {
  add.value = !add.value;
}

const onDeleteComment = () => {
  confirm.value = true;
};

const confirmDeleteComment = () => {
  deleting(props.commentId, user.curArticle.id);
  confirm.value = false;
};
</script>

<template>
  <div class="comment-all">
    <el-dialog v-model="confirm" width="30%">
      <span>你正在<b>删除评论</b>，请确认你的操作</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="confirm = false">取消</el-button>
          <el-button class="confirm-btn" @click="confirmDeleteComment">
            确认删除
          </el-button>
        </span>
      </template>
    </el-dialog>
    <div
      class="avatar"
      :style="{
        backgroundImage:
          props.avatar != null
            ? `url(${props.avatar}) `
            : `url(/assets/imgs/defaultAvatar.png)`,
      }"
    ></div>
    <div class="comment-main">
      <div class="comment-name">{{ props.name }}</div>
      <div class="comment-text">@{{ props.fatherName }}:{{ props.text }}</div>
      <div class="comment-info">
        <div class="time">{{ props.time }}</div>
        <div class="back" @click="addComment">
          <el-icon style="margin-right: 5px" size="18px" color="#f5900a">
            <ChatDotRound /> </el-icon
          >回复
        </div>
        <!-- <div class="like" @click="send"><el-icon style="margin-right: 5px;" size="18px" color="#f5900a">
            <Star v-if="!isStared" />
            <StarFilled v-else />
          </el-icon>{{ likeNum }}</div> -->
        <div
          v-if="props.toId == user.baseInfo.id"
          class="delete"
          @click="onDeleteComment"
        >
          <el-icon style="margin-right: 5px" size="18px" color="#f5900a">
            <Delete /> </el-icon
          >删除<span v-if="props.toId != user.baseInfo.id"></span>
        </div>
      </div>
      <Postcomment
        :newsId="user.curArticle.id"
        :commentId="props.fatherCommentId"
        :replyCommentId="props.commentId"
        :fatherId="props.toId"
        v-if="add"
        style="width: 100%"
      />
    </div>
  </div>
</template>

<style scoped>
.confirm-btn {
  background-color: #f5900a;
  color: white;
}

.comment-all {
  display: flex;
  align-items: start;
  margin: 15px 0;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background-image: url(/assets/imgs/avatar.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 15px;
}

.comment-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: start;
}

.comment-name {
  font-weight: bolder;
  font-size: 16px;
}

.comment-text {
  margin-top: 10px;
  font-size: 15px;
  line-height: 23px;
}

.comment-info {
  margin-top: 12px;
  font-size: 12px;
}

.comment-info,
.like,
.back {
  display: flex;
  align-items: center;
}

.like,
.delete {
  margin-left: 25px;
  cursor: pointer;
}

.time {
  color: #989798;
}
</style>
